/**
 * 搜索栏组件
 * 
 * 功能描述：
 * - 提供统一的搜索入口界面
 * - 支持搜索医生、医院、药品、疾病症状等多种类型
 * - 点击后跳转到独立的搜索页面
 * - 提供搜索建议和结果展示功能
 * 
 * 使用场景：
 * - 首页搜索入口
 * - 各页面的搜索功能
 * - 快速查找医生、医院、药品等信息
 * 
 * 作者：系统
 * 创建时间：2024
 */

import { Search } from 'lucide-react';
import { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

interface SearchResult {
  id: string;
  name: string;
  type: 'doctor' | 'hospital' | 'medicine' | 'symptom';
  description?: string;
}

interface SearchBarProps {
  onSearchResults?: (results: SearchResult[]) => void;
  onSearchLoading?: (loading: boolean) => void;
}

export default function SearchBar({ onSearchResults, onSearchLoading }: SearchBarProps) {
  const navigate = useNavigate();
  const [searchValue, setSearchValue] = useState('');
  const [isSearching, setIsSearching] = useState(false);
  const [showResults, setShowResults] = useState(false);
  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);

  // 改为跳转到独立搜索页
  const goSearchPage = () => {
    navigate('/search');
  };

  // 以下搜索逻辑保留给未来在此组件内使用（当前入口仅跳转，不触发）
  const performSearch = async (value: string) => {
    if (!value.trim()) {
      setSearchResults([]);
      onSearchResults?.([]);
      return;
    }
    setIsSearching(true);
    onSearchLoading?.(true);
    setTimeout(() => {
      const mockResults: SearchResult[] = [
        { id: '1', name: `${value}专家`, type: 'doctor', description: `擅长治疗${value}相关疾病` },
        { id: '2', name: `${value}药`, type: 'medicine', description: `治疗${value}的常用药物` },
        { id: '3', name: `${value}症状`, type: 'symptom', description: `${value}的常见症状表现` },
      ];
      setSearchResults(mockResults);
      onSearchResults?.(mockResults);
      setIsSearching(false);
      onSearchLoading?.(false);
    }, 800);
  };

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as Element;
      if (!target.closest('.search-container')) {
        setShowResults(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <div className="px-4 py-3 bg-white border-b border-gray-100 search-container">
      <div className="relative" onClick={goSearchPage}>
        <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
        <input
          type="text"
          value={searchValue}
          readOnly
          placeholder="搜索医生、医院、药品、疾病症状"
          className="w-full pl-12 pr-16 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 hover:bg-gray-100 focus:bg-white cursor-pointer"
        />
        <button
          type="button"
          onClick={goSearchPage}
          className="absolute right-2 top-1/2 transform -translate-y-1/2 px-3 h-8 bg-primary-500 rounded-lg flex items-center justify-center shadow-sm hover:bg-primary-600 text-white"
        >
          搜索
        </button>
      </div>
    </div>
  );
} 